<template>
  <div class="user">
    <div class="tabs">
      <div :class="{ active: tabActive === 1 }" @click="tabActive = 1">
        用户管理
      </div>
      <div :class="{ active: tabActive === 2 }" @click="tabActive = 2">
        添加用户
      </div>
    </div>
    <div class="user-content">
      <add-user v-if="tabActive === 2" />
      <user-mgt v-if="tabActive === 1" />
    </div>
  </div>
</template>

<script setup>
import addUser from "./comps/addUser.vue";
import userMgt from "./comps/userMgt.vue";
const tabActive = ref(1);
</script>
<style scoped lang="scss">
.user {
  height: 100%;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .tabs {
    width: 600px;
    display: flex;
    align-items: center;
    background: #ffffff1a;
    border: 1px solid #dcdcdc33;
    font-size: 16px;
    color: #fff;
    border-radius: 3px;
    div {
      width: 50%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }
    .active {
      border-radius: 3px;
      background: linear-gradient(
          90deg,
          rgba(61, 113, 113, 0.44) 9.5%,
          rgba(36, 50, 50, 0.845748) 79.83%,
          #1a1a1a 100%
        ),
        radial-gradient(
          47.11% 80.42% at 6.21% 0%,
          rgba(0, 255, 240, 0.536) 3%,
          rgba(0, 255, 240, 0.208) 37.5%,
          rgba(0, 255, 240, 0) 77%
        );
      border: 1px solid;

      border-image-source: linear-gradient(
        97.68deg,
        #46ffd3 0%,
        rgba(27, 139, 112, 0.24) 89.01%
      );

      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
    }
  }
  .user-content {
    width: 100%;
    height: calc(100% - 50px);
  }
}
</style>
